<template>
  <a-layout>
    <!-- 侧边 -->
    <a-layout-sider width="200" style="background: #fff">
      <a-menu v-if="ishome" v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" mode="inline"
        :style="{ height: '100%', borderRight: 0 }" @click="handleClick">
        <a-menu-item key="welcome">
          <MailOutlined />
          <span>欢迎</span>
        </a-menu-item>

        <a-sub-menu v-for="item in categoryTree" :key="item.id">
          <template #title>
            <span>
              <user-outlined />
              {{ item.name }}
            </span>
          </template>
          <a-menu-item v-for="child in item.children" :key="child.id">
            {{ child.name }}
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>

    <a-layout style="padding: 0 24px 24px">
      <!-- 内容 -->
      <a-layout-content :style="{
        background: '#fff',
        padding: '24px',
        'margin-top': '24px',

        minHeight: '280px',
      }">
        <div class="welcome" v-show="isShowWelcome">
          <MyWelcome />
        </div>
        <!-- 电子书列表 -->
        <a-list v-show="!isShowWelcome" item-layout="vertical" size="large" :pagination="pagination"
          :data-source="ebooks" :grid="{ gutter: 20, column: 3 }">
          <template #renderItem="{ item }">
            <a-list-item key="item.name">
              <!-- 每一个书籍的点赞 -->
              <template #actions>
                <span>
                  <component :is="StarOutlined" style="margin-right: 8px" />
                  {{ item.id }}
                </span>
                <span>
                  <component :is="LikeOutlined" style="margin-right: 8px" />
                  {{ item.voteCount }}
                </span>
                <span>
                  <component :is="ReadOutlined" style="margin-right: 8px" />
                  {{ item.viewCount }}
                </span>
              </template>

              <a-list-item-meta :description="item.description">
                <template #title>
                  <RouterLink :to="'/doc?ebookId=' + item.id">{{
        item.name
      }}</RouterLink>
                </template>
                <template #avatar><a-avatar :src="item.cover" /></template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import MyWelcome from "@/views/home/component/MyWelcome.vue";
import { MailOutlined, UserOutlined } from "@ant-design/icons-vue";

import {
  LikeOutlined,
  ReadOutlined,
  StarOutlined,
} from "@ant-design/icons-vue";
import { Ref, onMounted, ref } from "vue";

import {
  Pagination
} from "@/views/type";


import { MenuProps } from "ant-design-vue/es/menu";








const ishome = ref(true)

const isShowWelcome = ref(true);
const selectedKeys2 = ref<string[]>(["welcome"]);
const openKeys = ref<string[]>(["welcome"]);
//------------------页面未加载-----------------


//   获取分类数据


/**
 * 1.分类数据数据查询
 **/
import { storeToRefs } from "pinia";
import useCategory from "@/store/categorystore";

const categoryStore = useCategory();
const { eCategory, categoryTree } = storeToRefs(categoryStore)
const { getECategory } = useCategory();

// 从 store 中映射电子书数据，确保响应式
import useEbooks from "@/store/bookstore";
const ebookStore =   useEbooks()
const {ebooks } = storeToRefs(ebookStore);






/**
 * 2.获取电子书列表
 */






const pagination: Ref<Pagination> = ref({
  current: 1,
  pageSize: 10,
  total: 0,
});



ebookStore.getEbooks({
  page: pagination.value.current,
  size: pagination.value.pageSize,
});






onMounted(async () => {
  await getECategory(); // 获取分类
  await ebookStore.getEbooks({
    page: pagination.value.current,
    size: pagination.value.pageSize,
  }); // 更新电子书数据
});



let category2Id = 0;

const handleClick: MenuProps["onClick"] = (menuInfo) => {
  if (menuInfo.key == "welcome") {
    isShowWelcome.value = true;
  } else {
    category2Id = Number(menuInfo.key);
    isShowWelcome.value = false;

    ebookStore.getEbooks({
      page: pagination.value.current,
      size: pagination.value.pageSize,
      category2Id: category2Id!,
    });



  }
  console.log("click ", menuInfo);
};
</script>
<style scoped>
img {
  width: 50px;
  height: 50px;
}

.tableEdit {
  display: flex;
  flex-direction: row;
  justify-content: start;
}

.custom-search-input {
  width: 30%;
}

#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>
